<template>
  <div>
     学习生命周期 - 看控制台打印
      <p>{{ msg }}</p>
      <ul id="myUl">
          <li v-for="(val,index) in arr" :key="index">{{val}}</li>
      </ul>
      <p>---------添加一个数据--------------</p>
      <button @click="arr.push(111)">更新</button>
      
  </div>
</template>

<script>
export default {
    data () {
        return {
            msg:'欢迎学习vue生命周期',
            arr:[3,7,8,4,2]
        }
    },
    // 实例化以后
    beforeCreate () {
        console.log('vue生命周期')
        console.log(this.msg)
    },
    created () {
        console.log('vue生命周期')
        console.log(this.msg)
    },
    beforeMount () {
        console.log('beforeMount')
        console.log(document.querySelectorAll('#myUl>li')[0])
        // 作用：再挂载之前，可以操作数据-不触发update生命周期函数
        this.msg = '重新值'

    },
    mounted () {
        console.log('Mounted')
        console.log(document.querySelectorAll('#myUl>li')[0])
    },
    beforeUpdate () {
        console.log('beforeUpdate')
        console.log(document.querySelectorAll('#myUl>li')[5])
    },
    updated () {
        console.log('updated')
        console.log(document.querySelectorAll('#myUl>li')[5])
    },
    beforeDestroy () {
        console.log('beforeDestroy')
        console.log(this.msg)
          this.msg = null
        //   如果组件中有eventBus.$on 绑定过事件
        // 从eventBus手动销毁事件绑定 eventBus.$off('事件名')
    },
    destroyed () {
        console.log('destroyed')
        console.log(this.msg)
    }
}
</script>

<style>

</style>